<script setup>
  import { ref } from 'vue';
  // 导入组件 
  /*
    写法:
       既可以用大驼峰（MyPanel） 也可以用烤串法（my-panel）
    使用：
      1. 只要导入一个即可使用 无论是大驼峰还是烤串法
      2. 既可以是单标签 也可以是双标签 不过单标签要有结束符 '/'
    推荐：
      1. 导入时候推荐使用大驼峰 因为文件名也是大驼峰命名 并且变量不能有 '-'
      2. 使用的时候推荐使用烤串法
  */
  import MyPanel from './components/MyPanel.vue'
  // import my-panel from './components/MyPanel.vue' error 不能有 - 


  /*
    组件作用：
      1. 可以提高代码的复用性
      2. 可以保证代码的独立性，不背其他干扰
    组件的应用： 当要重复使用标签的时候就可以使用
  */
</script>


<template>
  <h3>可折叠面板</h3>
  <!-- 单标签 -->
  <MyPanel />
  <my-panel />
  <!-- 双标签 -->
  <MyPanel></MyPanel>
  <my-panel></my-panel>
</template>

<style lang="scss">
  body {
    background-color: #ccc;
  }

  #app {
    width: 400px;
    margin: 20px auto;
    padding: 1em 2em 2em;
    border: 4px solid green;
    border-radius: 1em;
    background-color: #fff;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, .5);
  }


</style>